@{ViewBag.Title = " UnidadMilitar "; Layout = "../Shared/_LayoutJtable.cshtml";}

@section LocalStyles
{
    <link href="~/Content/DataForm.css" rel="stylesheet"/>
    <link href="~/Content/TopErrorStyle.css" rel="stylesheet"/>
    <style type="text/css">
        #parent 
        {
            width:100%;
            height:100%;
        }
        .left
        {
            float:left;
            width:30%;
            height:auto;
            overflow:scroll; 
            height:700px;
            /*width:400px*/
        }
        .right
        {
            float:left;
            width:70%;
            height:100%;
            height:auto;   
        }
    </style>
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>


<div class="box common" >
     <div class="header">Unidades Militares en Mapa</div>

        <div id="parent">         
          <div class="left">
            <div class="filtering">
                    <form style="display:inherit">                       
                                <input type="text" name="filter" id="filter" style="display:inline;"/>
                       
                       <button type="submit" id="LoadRecordsButton" class="button medium orange" >Buscar</button>
                        
                    </form>
                </div>
                <div id="MyTableContainer"></div>
                <script type="text/javascript">
                    $(document).ready(function () {

                        var markers = [];

                        var bounds = new google.maps.LatLngBounds();
                        var options = {
                            zoom: 8,
                            center: new google.maps.LatLng(-17.434511, -66.225586),
                            mapTypeId: google.maps.MapTypeId.TERRAIN
                        };
                        var googleMap = new google.maps.Map($("#map")[0], options);
                        var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });



                        function OpenMarker(latitud, longitud, nombre) {
                           
                            var objflag = 1;
                            for (i = 0; i < markers.length; i++)
                            {
                                if (markers[i].html = nombre)
                                    objflag = 0;
                            }

                            if (objflag = 1) {

                                var point = new google.maps.LatLng(latitud, longitud);
                                infoWindow = new google.maps.InfoWindow({ content: '<div style="background-color:transparent;height:60px; width:200px; color: black; font-weight:bold">' + nombre + '</div>' });
                                var marker = new google.maps.Marker({
                                    position: point,
                                    map: googleMap,
                                    html: '<div style="background-color:transparent;height:60px; width:200px; color: black; font-weight:bold">' + nombre + '</div>',
                                    animation: google.maps.Animation.DROP
                                });

                                markers[markers.length] = marker;

                                google.maps.event.addListener(marker, "click", function () {
                                    infoWindow.setContent(this.html);
                                    infoWindow.open(googleMap, this);
                                });


                                infoWindow.open(googleMap, marker);
                            }

                        }


                        function clearMarkers() {
                            for (var i = 0; i < markers.length; i++) {
                                if (markers[i]) {
                                    markers[i].setMap(null);
                                    delete markers[i]

                                }
                            }
                        }
                        


                        $('#MyTableContainer').jtable({
                            title: 'UnidadMilitar',
                            paging: true,
                            pageSize: 10,
                            sorting: true,
                            defaultSorting: 'Id ASC',
                            actions: {
                                listAction: '@Url.Action("JSONPagedListByFilter")'
                         },
                         fields:
                         {
                             Id: {
                                 key: true,
                                 create: false,
                                 edit: false,
                                 list: false
                             }
                             ,
                             Guid: {
                                 type: 'hidden'
                             }
                             ,
                             Foto:
                             {
                                title: 'Mapa',
                                width: '30px',
                                sorting: false,
                                edit: false,
                                create: false,
                                listClass: 'child-opener-image-column',
                                display: function (tempData) {
                                    var $img = $('<img class="child-opener-image" with="20" height="20" src="../Content/images/home.png" title="click para  ver en el Mapa" />');
                                    $img.click(function () {
                                        OpenMarker(tempData.record.Latitud, tempData.record.Longitud, tempData.record.Descripcion);
                                    });

                                    return $img;
                                }
                             },

                             Codigo: {
                                 title: 'Codigo',
                                 create: true,
                                 edit: true,
                                 list: true,
                                 inputClass: 'validate[required]',
                                 sorting: false
                             }
                             ,
                             Nombre: {
                                 title: 'Nombre',
                                 create: true,
                                 edit: true,
                                 list: true,
                                 inputClass: 'validate[required]',
                                 sorting: false
                             }
                             ,
                             Latitud: {
                                 title: 'Latitud',
                                 create: true,
                                 edit: true,
                                 list: true,
                                 sorting: false
                             }
                             /*,
                             Longitud: {
                                 title: 'Longitud',
                                 create: true,
                                 edit: true,
                                 list: true,
                                 sorting: false
                             }*/
                            
                         },
                         formCreated: function (event, data) { data.form.validationEngine(); },
                         formSubmitting: function (event, data) { return data.form.validationEngine('validate'); },
                         formClosed: function (event, data) { data.form.validationEngine('hide'); data.form.validationEngine('detach'); }
                     });
                         $('#LoadRecordsButton').click(function (e) { e.preventDefault(); $('#MyTableContainer').jtable('load', { filter: $('#filter').val() }); });
                         $('#LoadRecordsButton').click();
                     });
                </script>

          </div>
          <div class="right" >
               <div id="map" style="height:700px">
                </div>
           </div>
         </div>

</div>

